<template>
	<div class="lockScreen-container">
		<div class="login-body">
			<div class="login-windows">
				<div class="login-windows-left">
					<img src="../assets/redson.png" width="250" alt="" />
				</div>
				<div class="login-windows-right">
					<span class="logo"><h2>欢迎登录♥♠♦♣</h2></span>
					<div class="login-windows-content">
						<form >
						<input type="text" placeholder="请输入账号" name="uname" required>
						<input type="password" placeholder="请输入密码" autocomplete="off" name="paw" required>
						</form>
						<button class="login" type="submit" @click="onclick1">马上登录</button>
						<div class="login-windows-footer">
							<a>注册</a>
							<a>忘记密码?</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="login-bottom-bar">
			<div class="login-tip">
				<span>请使用Chrome 或者 Firefox 浏览器,不要使用IE 浏览器</span><a href="https://www.google.cn/chrome/" target="_blank">下载</a>
			</div>
		</div>
	</div>
</template>

<script setup>
import { onMounted, computed } from 'vue';
import $store from '../stores/index';
import RouterUtil from '@/utils/RouterUtil.js';
//const state = reactive({ display: true, visible: false });

const loadShow = computed(() => {
	return $store.state.session.loadShow;
});

onMounted(() => {
	console.log("-> init LockScreen");
});

function onclick1(){
	RouterUtil.goHome();
}
</script>

<style lang="less" scoped>
@import '../global';
.lockScreen-container {	
	top: 0;
	left: 0;
	background-size: 200% 200%;
	background-color: rgba(0, 170, 127, 0.8);
	overflow: hidden;
	position: absolute;
	height: 100%;
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction:column;
	justify-content:center;
	align-items: center;
}

.login-container {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-wrap: nowrap;
	flex-direction:column;
	justify-content:center;
	align-items: center;
}

.login-body {
	width: 100%;
	height: 90%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;
	justify-content:center;
	align-items: center;
}

.login-bottom-bar {
	width: 100%;
	height: 10%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;
	justify-content:center;
	align-items: center;
}

.login-windows {
	width: 40%;
	height: 45%;
	font-family: 'Noto Sans', sans-serif;
	border-radius: 15px;
	box-shadow: 0 0 15px rgba(12, 67, 101);
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;
	justify-content:center;
	align-items: center;
}

.login-windows-left {
	width: 50%;
	height: 100%;
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
	background: var(--theme-color);
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;
	justify-content:center;
	align-items: center;
}

.login-windows-right {
	width: 50%;
	height: 100%;
	border-top-right-radius: 15px;
	border-bottom-right-radius: 15px;
	background-color: rgba(223, 223, 223, 0.8);
}

.login-windows-right .logo {
	text-align: center;
	margin-top: 22px;
	margin-bottom: 10px;
	display: block;
}

.login-windows-content {
	width: 100%;
	height: 80%;
	display: flex;
	flex-wrap: nowrap;
	flex-direction:column;
	justify-content:center;
	align-items: center;
	form {
		display: flex;
		flex-wrap: nowrap;
		flex-direction:column;
		justify-content:center;
		align-items: center;
	}
}

.login-windows-content input{
    width: 75%;
    height: 20px;
    margin-top: 10px;
    border: none;
    border-radius: 8px;
    padding: 1.1rem;
    font-size: 14px;
}

.login-windows-content button.login{
    border: none;
    outline: none;
	margin-top: 10px;
    width: 82%;
    height: 18%;
    padding: 5px;
    border-radius: 10px;
    font-size: 16px;
    color: white;
    background-image: linear-gradient(to right,lightblue,blue);
}

.login-windows-content button.login:hover{
    background-image: linear-gradient(to right,rgb(0, 0, 110),rgb(0,0,110));
}

.login-windows-footer {
	display: flex;
	flex-wrap: nowrap;
	flex-direction:row;
	justify-content:center;
	align-items: center;
}
</style>
